<template>
  <div class="nav">
    <div class="size">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          尺寸<i class="el-icon-mobile-phone"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">a</el-dropdown-item>
          <el-dropdown-item command="b">b</el-dropdown-item>
          <el-dropdown-item command="c">c</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="preview" @click="preview">
      <span>预览<i class="el-icon-view"></i></span>
    </div>
    <div class="preview" @click="downloadImage">
      <span>下载<i class="el-icon-download"></i></span>
    </div>
    <div class="number">
      <el-input-number
        v-model="canvasWidth"
        controls-position="right"
        size="small"
      ></el-input-number>
      <i class="el-icon-refresh" @click="exchange"></i>
      <el-input-number
        v-model="canvasHeight"
        controls-position="right"
        size="small"
      ></el-input-number>
    </div>
    <div class="ratio">
      <span>{{ ratio }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import bus from "@/utils/eventBus";

@Component({
  components: {},
})
export default class Emain_nav extends Vue {
  canvasWidth = 200;
  canvasHeight = 200;
  ratio = "100.0%";

  @Watch("canvasWidth")
  handleWidth(width: number): void {
    bus.$emit("canvasWidth", width);
  }

  @Watch("canvasHeight")
  handleHeight(height: number): void {
    bus.$emit("canvasHeight", height);
  }

  mounted(): void {
    bus.$on("ratio", (ratio: string) => {
      this.ratio = ratio;
    });
  }

  exchange(): void {
    [this.canvasWidth, this.canvasHeight] = [
      this.canvasHeight,
      this.canvasWidth,
    ];
  }

  downloadImage(): void {
    bus.$emit("downloadImage", "download");
  }

  preview(): void {
    bus.$emit("preview", "previewImage");
  }

  handleCommand(command: string): void {
    switch (command) {
      case "a":
        console.log("a");
        break;
      case "b":
        console.log("b");
        break;
      case "c":
        console.log("c");
        break;
      default:
        console.log("参数错误");
        break;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/common.scss";
.nav {
  width: 100%;
  height: 10vh;
  background-color: cornsilk;

  @include box-flex(space-evenly);

  .size {
    .el-dropdown-link {
      cursor: pointer;

      &:hover {
        color: #409eff;
      }
    }
    .el-icon-mobile-phone {
      font-size: 16px;
    }
  }

  .preview {
    &:hover {
      cursor: pointer;
      color: #409eff;
    }
    span {
      font-size: 14px;
    }
  }

  .number {
    width: 30%;
    @include box-flex(space-evenly);
  }

  .ratio {
    span {
      font-size: 14px;
    }
  }
}
</style>
